import { defineComponent, ref, onMounted } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { MapChart } from "echarts/charts";
import {
  VisualMapComponent,
  TooltipComponent,
  GeoComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import mapJson from "../../../assets/map.json";
import * as echarts from "echarts";
import "./CovidMap.css";

// 注册必需的组件
use([
  MapChart,
  VisualMapComponent,
  TooltipComponent,
  GeoComponent,
  CanvasRenderer,
]);

export default defineComponent({
  name: "CovidMap",
  components: {
    VChart,
  },
  setup() {
    const mapData = [
      { name: "北京", value: 523, confirmed: 1245, cured: 698, dead: 24 },
      { name: "天津", value: 234, confirmed: 876, cured: 632, dead: 10 },
      { name: "河北", value: 345, confirmed: 1567, cured: 1198, dead: 24 },
      { name: "山西", value: 123, confirmed: 567, cured: 432, dead: 12 },
      { name: "内蒙古", value: 89, confirmed: 456, cured: 356, dead: 11 },
      { name: "辽宁", value: 267, confirmed: 789, cured: 512, dead: 10 },
      { name: "吉林", value: 178, confirmed: 654, cured: 465, dead: 11 },
      { name: "黑龙江", value: 234, confirmed: 987, cured: 743, dead: 10 },
      { name: "上海", value: 678, confirmed: 2345, cured: 1645, dead: 22 },
      { name: "江苏", value: 456, confirmed: 1876, cured: 1398, dead: 22 },
      { name: "浙江", value: 389, confirmed: 1654, cured: 1243, dead: 22 },
      { name: "安徽", value: 234, confirmed: 1123, cured: 876, dead: 13 },
      { name: "福建", value: 178, confirmed: 876, cured: 687, dead: 11 },
      { name: "江西", value: 145, confirmed: 765, cured: 609, dead: 11 },
      { name: "山东", value: 456, confirmed: 1987, cured: 1509, dead: 22 },
      { name: "河南", value: 567, confirmed: 2234, cured: 1645, dead: 22 },
      { name: "湖北", value: 892, confirmed: 68234, cured: 63987, dead: 4355 },
      { name: "湖南", value: 234, confirmed: 1345, cured: 1098, dead: 13 },
      { name: "广东", value: 678, confirmed: 2456, cured: 1754, dead: 24 },
      { name: "广西", value: 189, confirmed: 876, cured: 676, dead: 11 },
      { name: "海南", value: 98, confirmed: 456, cured: 348, dead: 10 },
      { name: "重庆", value: 345, confirmed: 1234, cured: 876, dead: 13 },
      { name: "四川", value: 456, confirmed: 1876, cured: 1398, dead: 22 },
      { name: "贵州", value: 123, confirmed: 567, cured: 432, dead: 12 },
      { name: "云南", value: 178, confirmed: 765, cured: 576, dead: 11 },
      { name: "西藏", value: 12, confirmed: 45, cured: 32, dead: 1 },
      { name: "陕西", value: 234, confirmed: 987, cured: 743, dead: 10 },
      { name: "甘肃", value: 123, confirmed: 456, cured: 323, dead: 10 },
      { name: "青海", value: 34, confirmed: 123, cured: 88, dead: 1 },
      { name: "宁夏", value: 56, confirmed: 234, cured: 176, dead: 2 },
      { name: "新疆", value: 178, confirmed: 654, cured: 465, dead: 11 },
      { name: "台湾", value: 289, confirmed: 987, cured: 687, dead: 11 },
      { name: "香港", value: 456, confirmed: 1654, cured: 1187, dead: 11 },
      { name: "澳门", value: 67, confirmed: 234, cured: 165, dead: 2 },
    ];

    const mapLoaded = ref(false);

    const chartOption = ref({
      tooltip: {
        trigger: "item",
        formatter: (params: any) => {
          if (params.data) {
            return `
              <div style="padding: 10px;">
                <div style="font-weight: bold; margin-bottom: 5px;">${params.name}</div>
                <div style="color: #ff4d4f;">现有确诊: ${params.data.value}</div>
                <div style="color: #faad14;">累计确诊: ${params.data.confirmed}</div>
                <div style="color: #52c41a;">累计治愈: ${params.data.cured}</div>
                <div style="color: #8c8c8c;">累计死亡: ${params.data.dead}</div>
              </div>
            `;
          }
          return `<div style="padding: 10px;">${params.name}</div>`;
        },
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00d4ff",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
      },
      visualMap: {
        min: 0,
        max: 1000,
        text: ["高", "低"],
        realtime: false,
        calculable: true,
        inRange: {
          color: ["#e0f7ff", "#00d4ff", "#0099ff", "#0066ff", "#ff4d4f"],
        },
        textStyle: {
          color: "#fff",
        },
        left: "left",
        bottom: "20px",
      },
      series: [
        {
          name: "疫情数据",
          type: "map",
          map: "china",
          roam: true,
          label: {
            show: true,
            color: "#fff",
            fontSize: 10,
          },
          itemStyle: {
            areaColor: "#0a2647",
            borderColor: "#00d4ff",
            borderWidth: 1,
          },
          emphasis: {
            label: {
              show: true,
              color: "#fff",
              fontSize: 12,
            },
            itemStyle: {
              areaColor: "#00d4ff",
              shadowColor: "rgba(0, 212, 255, 0.5)",
              shadowBlur: 20,
            },
          },
          data: mapData,
          nameMap: {
            // 确保地图名称正确映射
            北京市: "北京",
            天津市: "天津",
            河北省: "河北",
            山西省: "山西",
            内蒙古自治区: "内蒙古",
            辽宁省: "辽宁",
            吉林省: "吉林",
            黑龙江省: "黑龙江",
            上海市: "上海",
            江苏省: "江苏",
            浙江省: "浙江",
            安徽省: "安徽",
            福建省: "福建",
            江西省: "江西",
            山东省: "山东",
            河南省: "河南",
            湖北省: "湖北",
            湖南省: "湖南",
            广东省: "广东",
            广西壮族自治区: "广西",
            海南省: "海南",
            重庆市: "重庆",
            四川省: "四川",
            贵州省: "贵州",
            云南省: "云南",
            西藏自治区: "西藏",
            陕西省: "陕西",
            甘肃省: "甘肃",
            青海省: "青海",
            宁夏回族自治区: "宁夏",
            新疆维吾尔自治区: "新疆",
            台湾省: "台湾",
            香港特别行政区: "香港",
            澳门特别行政区: "澳门",
          },
        },
      ],
    });

    onMounted(async () => {
      try {
        // 打印地图中的省份名称，方便调试
        console.log(
          "地图省份名称:",
          mapJson.features?.map((f: any) => f.properties.name)
        );

        echarts.registerMap("china", mapJson);
        mapLoaded.value = true;
        console.log("中国地图加载成功");
      } catch (error) {
        console.error("地图加载失败:", error);
        mapLoaded.value = true; // 即使失败也显示图表
      }
    });

    return () => (
      <div class="covid-map">
        <div class="covid-map__header">
          <h3 class="covid-map__title">全国疫情分布图</h3>
        </div>
        <div class="covid-map__chart">
          {mapLoaded.value ? (
            <VChart
              option={chartOption.value}
              autoresize
              style="height: 100%; width: 100%;"
            />
          ) : (
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #00d4ff;">
              加载地图数据中...
            </div>
          )}
        </div>
      </div>
    );
  },
});
